<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./tools/axios.js"></script>
</head>

<body>
    <div class="box">
        <p>
            用户名称： <input type="text" id="username">
        </p>
        <p>
            用户性别：
            <input type="radio" name="gender" value="男" id="g1"> 男
            <input type="radio" checked name="gender" value="女" id="g2"> 女
        </p>
        <p>
            用户年龄：
            <input type="number" id="age">
        </p>
        <p>
            联系方式：
            <input type="text" id="tel">
        </p>
        <p>
            用户住址：
            <select id="addr">
                <option value="湖北 武汉">湖北 武汉</option>
                <option value="陕西 西安">陕西 西安</option>
                <option value="陕西 榆林">陕西 榆林</option>
                <option value="山西 大同">山西 大同</option>
                <option value="山西 运城">山西 运城</option>
                <option value="辽宁 铁岭">辽宁 铁岭</option>
            </select>
        </p>

        <p>
            <button>确认修改</button>
        </p>
    </div>


    <script>

        // 先获取id，根据id获取用户的内容
        const id = location.search.split('=')[1];
        ; (async () => {
            const res = await axios({
                url: 'http://127.0.0.1:3000/users/' + id
            })

            // 拿到数据之后，要渲染表单
            const { data } = res.data;

            document.querySelector('#username').value = data.name;
            document.querySelector('#age').value = data.age;
            document.querySelector('#tel').value = data.tel
            document.querySelector('#addr').value = data.addr
            let domId = '';
            document.getElementsByName('gender').forEach(item => {
                if (item.value === data.gender) {
                    domId = item.id;
                }
            })
            document.querySelector('#' + domId).checked = true;
        })()


        document.querySelector('button').onclick = async function () {
            let domId = '';
            document.getElementsByName('gender').forEach(item => {
                if (item.checked) {
                    domId = item.id;
                }
            })
            // 需要整理成一个对象
            const data = {
                name: document.querySelector('#username').value,
                age: document.querySelector('#age').value,
                tel: document.querySelector('#tel').value,
                addr: document.querySelector('#addr').value,
                gender: document.querySelector('#' + domId).value
            }
            // console.log(data);
            const res = await axios({
                methods: 'put',
                url: 'http://127.0.0.1:3000/users/' + id,
                data
            })
            // console.log(res);
            if (res.status === 200) {
                alert(res.data.msg);
                // 跳转到指定页面
                location.href = './03-请求用户数据.html'
            }
        }
    </script>
</body>

</html>